<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>treeGrid 树形表格 treeGrid - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="得益于 layui 良好的设计，可以顺利扩展 treeGrid 插件。支持树状表格、支持折叠记忆功能、支持动态新增行、支持动态删除行、支持行内过滤，支持方法式打开或折叠任意节点等等。内部对原来table的渲染方法进行了拆分，以便更精准控制table的行为。"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>treeGrid 树形表格</a> <span class="layui-badge layui-bg-green layui-hide-xs">treeGrid</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/2529912/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">易</cite> <img src="/qqapp/101235792/2207970FC3E44C5213412C539FDFFEBB/100" alt="易"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>得益于 layui 良好的设计，可以顺利扩展 treeGrid 插件。支持树状表格、支持折叠记忆功能、支持动态新增行、支持动态删除行、支持行内过滤，支持方法式打开或折叠任意节点等等。内部对原来table的渲染方法进行了拆分，以便更精准控制table的行为。</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2019-10-31 </span> <span class="layui-inline">创建：2018-8-28 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <hr>插件使用要求
       <br>1、浏览器（极速模式、ie11或以上、google浏览器）
       <br>
       <hr>代码以及例子
       <br>使用本插件，请务必以码云中的代码为准，例子文件为index.html
       <br>在线 <a href="http://beijiyi.cc:8080/" target="_blank" rel="nofollow">demo</a> 
       <br>码云地址： <a href="https://gitee.com/beijiyi/tree_table_treegrid_based_on_layui" target="_blank" rel="nofollow">代码</a> 
       <br>
       <hr>常见问题及注意：
       <br>1、例子不支持本地C://test/inde.html形式运行
       <br>2、根节点在第一个
       <br>3、确保url请求到数据（多数人员在此环节存在问题）
       <br>
       <hr>如何提问：
       <br>在 <a href="/jie/33209/" target="_blank">treeGrid第二版</a> 中提问或建议。
       <br>
       <hr>更新日志：
       <br>
       <pre>20180904<br>1、json数据源顺序不再需要根节点在第一位，可以是无序（从数据库中只需要查询，不需要排序）<br>2、增加icon控制，默认开启图标，提供默认图标，可自定义图标<br>3、多选：默认选中，禁止选中等功能。<br>4、提供展开折叠全部节点功能，提供默认值控制展开或折叠节点</pre>
       <pre>在layui2.3的table组件基础上独立扩展出来针对普通表格和树状表格的插件，主要增加如下功能。<br>1、【增加】支持树状表格<br>2、【增加】支持折叠记忆功能（折叠的节点不受父节点折叠状态影响）<br>3、【增加】动态新增行（一行或多行）<br>4、【优化】动态删除行（一行或多行）<br>5、【增加】行内过滤（每次提交会自动提交此区域的参数，需要结合后台使用）<br>6、【增加】方法式打开或折叠任意节点（table.treeNodeOpen(o,isOpen)）<br>7、【增加】数据刷新query方法（与reload方法区别在于，只刷新数据区域，而不是重新渲染整个table）<br>8、内部对原来table的渲染方法进行了拆分，以便更精准控制table的行为（分别是生成单元格、生成tr、渲染分页、渲染行内过滤区域、渲染全部、渲染节点内容等等）</pre>效果图：
       <br> 整体效果：
       <br>
       <img src="/upload/2018_8/2529912_1535450517204_62288.jpg"> 
       <br>
       <br> 折叠记忆：
       <br> 
       <img src="/upload/2018_8/2529912_1535452107668_32328.gif"> 
       <br>
       <br> 新增节点：
       <br> 
       <img src="/upload/2018_8/2529912_1535452274376_35448.gif"> 
       <br>
       <br> 删除节点：
       <br> 
       <img src="/upload/2018_8/2529912_1535452517405_66212.gif"> 
       <br>
       <br> 删除多个节点：
       <br> 
       <img src="/upload/2018_8/2529912_1535452532230_45950.gif"> 
       <br>
       <br> 节点初始化隐藏、显示控制
       <br> 1、数据源设置is_open
       <br> {"id":"111", "pId":"1", "name":"苹果","lay_is_open":false} 
       <br> 效果
       <br> 
       <img src="/upload/2018_8/2529912_1535525378937_60924.jpg"> 
       <br> 
       <br> 多选操作（选中父节点，子节点被选中；全部子节点被选中，父节点也被选中；自己看效果）
       <br> 
       <img src="/upload/2018_8/2529912_1535545167993_80515.gif"> 
       <br>
       <br>
       <br>
       <br>
       <pre>&lt;script&gt;<br>    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;<br>    layui.config({<br>        base: 'design/extend/'<br>    }).extend({<br>        treeGrid:'treeGrid'<br>    }).use(['jquery','treeGrid','layer'], function(){<br>        var $=layui.jquery;<br>        treeGrid = layui.treeGrid;//很重要<br>        layer=layui.layer;<br>        ptable=treeGrid.render({<br>            id:tableId<br>            ,elem: '#'+tableId<br>            ,idField:'id'<br>            ,url:'/data2.json'<br>            ,cellMinWidth: 100<br>            ,treeId:'id'//树形id字段名称<br>            ,treeUpId:'pId'//树形父id字段名称<br>            ,treeShowName:'name'//以树形式显示的字段<br>            ,cols: [[<br>                {width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/<br>                    ,templet: function(d){<br>                    var html='';<br>                    var addBtn='&lt;a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add"&gt;添加&lt;/a&gt;';<br>                    var delBtn='&lt;a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"&gt;删除&lt;/a&gt;';<br>                    return addBtn+delBtn;<br>                }<br>                }<br>                ,{field:'name', edit:'text',width:300, title: '水果名称'}<br>                ,{field:'id',width:100, title: 'id'}<br>                ,{field:'pId', title: 'pid'}<br>            ]]<br>            ,page:false<br>        });<br><br>        treeGrid.on('tool('+tableId+')',function (obj) {<br>            if(obj.event === 'del'){//删除行<br>                del(obj);<br>            }else if(obj.event==="add"){//添加行<br>                add(obj.data);<br>            }<br>        });<br>    });<br><br>    function del(obj) {<br>        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},<br>            function(index){//确定回调<br>                obj.del();<br>                layer.close(index);<br>            },function (index) {//取消回调<br>               layer.close(index);<br>            }<br>        );<br>    }<br><br><br>    var i=1000;<br>    //添加<br>    function add(pObj) {<br>        var param={};<br>        param.name='水果'+Math.random();<br>        param.id=++i;<br>        param.pId=pObj?pObj.id:0;<br>        treeGrid.addRow(tableId,pObj?pObj.LAY_TABLE_INDEX+1:0,param);<br>    }<br><br>    function print() {<br>        console.log(treeGrid.cache[tableId]);<br>        var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", {<br>            time:3000<br>            ,offset: 'auto'//顶部<br>            ,shade: 0<br>        });<br>    }<br>&lt;/script&gt;</pre> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/2529912_1535452603592_78659.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://gitee.com/lrd110/tree_table_treegrid_based_on_layui" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>